<template>
	<!--电卡充值-->
	<view>
		<!-- <view class="bg-img bg-white nbys">
			
		</view> -->
		<view class="operating_box" style="margin-top:40rpx;padding-top:10rpx;">
			<view class="cu-form-group">
				<view class="title">卡号</view>
				<input placeholder="请输入卡号" @input="getcard" v-model="card" name="input"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">手机号</view>
				<input placeholder="请输入手机号" @input="getsjhm" name="input" maxlength="11"></input>
			</view>
		</view>
	    <view class="operating_box" style="margin-top:20rpx;margin-bottom:20rpx;">
			<view class="margin-top-xs padding-sm text-black">请选择充值面额</view>
			<view class="flex text-center padding-top-sm">
				<view class="flex-sub">
					<button :class="index==1?'txzys':''" @tap="tabSelect" :data-id="1" :data-num="5" class="cu-btn line-gray text-black">5元</button>
				</view>
				<view class="flex-sub">
					<button :class="index==2?'txzys':''" @tap="tabSelect" :data-id="2" :data-num="10" class="cu-btn line-gray text-black">10元</button>
				</view>
				<view class="flex-sub">
					<button :class="index==3?'txzys':''" @tap="tabSelect" :data-id="3" :data-num="20" class="cu-btn line-gray text-black">20元</button>
				</view>
			</view>
			<view class="flex text-center padding-top-lg">
				<view class="flex-sub">
					<button :class="index==4?'txzys':''" @tap="tabSelect" :data-id="4" :data-num="30" class="cu-btn line-gray text-black">30元</button>
				</view>
				<view class="flex-sub">
					<button :class="index==5?'txzys':''" @tap="tabSelect" :data-id="5" :data-num="40" class="cu-btn line-gray text-black">40元</button>
				</view>
				<view class="flex-sub">
					<button :class="index==6?'txzys':''" @tap="tabSelect" :data-id="6" :data-num="50" class="cu-btn line-gray text-black">50元</button>
				</view>
			</view>
			<view class="padding-top-lg">
				<view class="cu-form-group">
					<view class="title">其他金额</view>
					<input class="uni-input-input" type="number" @input="getN" value="" placeholder="请输入其他你要充值的金额" name="input"></input>
				</view>
			</view>
		</view>
		<view class="padding-sm">注意充值金额，充值之后概不退款，够用即可！</view>
		<view class="foot">
		   <button type="button" class="cu-btn block bg-blue lg" @tap="czhi()">充值</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index:0,
				je:0,
				orderNum:'',
				card:'',
				sjhm:'',
			}
		},
		onLoad(options) {
			let card=options.no;
			console.log("card="+card);
			// this.card=card;
		},
		methods: {
			tabSelect(e) {
				this.index = e.currentTarget.dataset.id;
				this.je=e.currentTarget.dataset.num;
			},
			qx(){	this.index = 0;},
			getN(e){
				this.index = 0;
				this.je = e.detail.value;
			},
			getcard(e){
				this.card = e.detail.value;
			},
			getsjhm(e){
				this.sjhm = e.detail.value;
			},	
			czhi(){
				 if(this.je==null || this.je=='' || this.je==0){
					 uni.showToast({
					 	 icon: 'none',
					     title: '请选择充值金额或输入充值金额'
					 });
					 return;
				 }
				 if(this.card==null || this.card==''){
					 uni.showToast({
						 icon: 'none',
						 title: '卡号不能为空'
					 });
				 }
				 if(this.sjhm==null || this.sjhm==''){
					 uni.showToast({
						 icon: 'none',
						 title: '手机号码不能为空'
					 });
				 }
				 //window.location.href = 'http://evcssappapi.yushengkeji.cn/user/v1/recharge?money='+that.je+"&card_no="+that.card+"&phone_number="+that.sjhm
				 let that=this;
				 that.http.tokenreq({
				 	url: 'user/v1/recharge',
				 	data: {
				       "money":that.je,
					   "card_no":that.card,
					   "phone_number":that.sjhm
				 	}
				 }).then((res) => {
				 	let e=res.data;
					console.log("e="+JSON.stringify(res.data));
				 	if(e.code==0 && e.success){
				 	   that.pay(e.data);
				 	}else{
						uni.showToast({
							icon: 'none',
							title: e.message
						});
					}
				 })
			},
			pay(data) {
				if (typeof WeixinJSBridge == "undefined"){
					if( document.addEventListener ){
						document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(data), false);
					}else if (document.attachEvent){
						document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(data));
						document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(data));
					}
				}else{
					this.onBridgeReady(data);
				}
			},
			onBridgeReady(data){
				//"data":{"appId":"wxc12e65ecba8895fc","timeStamp":"1618902047",
				//"nonceStr":"1690F535142A97D59E0766812CCF93C6",
				//"package":"prepay_id=wx20150047498196e5e137285674a30a0000",
				//"signType":"MD5","paySign":"5AF18222CA18A82E6CF020038DDD10B1"}}
				WeixinJSBridge.invoke('getBrandWCPayRequest',
					{
						"appId": data.appId, //公众号名称，由商户传入
						"timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数
						"nonceStr": data.nonceStr, //随机串
						"package": data.package,
						"signType": data.signType, //微信签名方式：
						"paySign": data.paySign //微信签名
					},
					function(res2){
						uni.showToast({
							icon: 'none',
							title: JSON.stringify(res2)
						});
						//alert(JSON.stringify(res2))
						if(res2.err_msg == "get_brand_wcpay_request:ok" ){
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
						    setTimeout(()=>{
						    	uni.navigateTo({
						    		url: "/pages/user/wallet/wallet"
						    	})
						    },100)
					    }else{
							setTimeout(()=>{
								uni.navigateTo({
									url: "/pages/user/wallet/wallet"
								})
							},100)
						}
				});
			}
		}
	}
</script>

<style>
	uni-view {
	    font-size: 14px;
	    line-height:1.5;
	}
	.nbys{
		background-image:url(../../../common/img/beiing.png);
		width: 100%;
		height:100rpx;
	}
    .cu-btn{
		padding:40rpx 40rpx; 
	}
	/* .inpys{
		border:2rpx solid #F1F1F1;
		text-align: left;
		padding:40rpx 0rpx;
	} */
	.uni-input-input{
		border:2rpx solid #F1F1F1;
		text-align: left;
		padding:20rpx 10rpx;
	}
	.foot{
		position: fixed;
		left: 0;
		bottom: 0;
		width:100%;
	}
	.txzys{
		background-color:#0081FF;
		color: white;
	}
</style>
